<template>
  <!-- 模型列表-组合模型 -->
  <div class="ComposeComponent-wrapper">
    <searchData :search-data="searchOptions" @search="handleSearch" />
    <list-table
      ref="table"
      :columns="columns"
      :pageKeys="['pageNum', 'pageSize', 'total']"
      :request="loadData"
      row-key="id"
    >
      <!-- 组合模型名称 -->
      <a slot="portfolioModelName" slot-scope="text, record" @click="handleView(record)">{{ text }}</a>
      <!-- 操作 -->
      <template slot="actions" slot-scope="text, record">
        <MoreButton>
        <a class="base-btn" @click.stop="handleActions(record)">查看</a>
        <a class="base-btn del_btn" v-if="hideBuquBtn()" @click.stop="handleRemove(record)">取消组合</a>
        </MoreButton>
      </template>
    </list-table>
    <!-- 查看组合模型明细 -->
    <dialog-form
      ref="dialogForm"
      :visible.sync="visible"
      edit-model="V"
      header-title="组合模型列表"
      width="80%"
      :isEmit="false"
    >
      <template #formHeader>
        <b-table
          ref="tableHistory"
          :columns="columnsHistory"
          :pageKeys="['pageNum', 'pageSize', 'total']"
          :request="loadDataHistory"
          row-key="id"
        >
          <!-- 模型名称 -->
          <a
            slot="modelName"
            slot-scope="text, record"
            @click="handleOpen([{ modelId: record.modelFileId, version: record.modelFileVersion, modelTitle: modelName }])"
            >{{ text }}</a
          >
        </b-table>
      </template>
    </dialog-form>
  </div>
</template>

<script>
import {
  getBimPortfolioModel,
  deleteBimPortfolioModel,
  getPageBimPortfolioModelMapper
} from '@/api/bimIntegrate/bimModel'
import DialogForm from '@/components/DialogForm' // 弹窗

const searchOptions = [
  {
    name: '组合模型名称',
    value: 'portfolioModelName',
    type: 'input'
  }
]
const columns = [
  {
    title: '序号',
    dataIndex: 'index',
    customRender() {
      return arguments[2] + 1
    }
  },
  {
    title: '组合模型名称',
    dataIndex: 'portfolioModelName',
    scopedSlots: { customRender: 'portfolioModelName' }
  },
  {
    title: '组合模型大小',
    dataIndex: 'portfolioModelSize',
    customRender(e) {
      return e ? e + 'M' : '无'
    }
  },
  {
    title: '创建时间',
    dataIndex: 'createTime'
  },
  {
    title: '模型数量',
    dataIndex: 'modelNum'
  },
  {
    title: '操作',
    dataIndex: 'actions',
    width: 180,
    scopedSlots: { customRender: 'actions' }
  }
]
const columnsHistory = [
  {
    title: '模型名称',
    dataIndex: 'modelName',
    scopedSlots: { customRender: 'modelName' }
  },
  {
    title: '模型分类',
    dataIndex: 'modelClassifyName'
  },
  {
    title: '模型类别',
    dataIndex: 'modelTypeName'
  },
  {
    title: '专业分类',
    dataIndex: 'professionalTypeName'
  },
  {
    title: '楼层标签',
    dataIndex: 'floorLabelName'
  },
  {
    title: '模型大小',
    dataIndex: 'modelSize',
    customRender(e) {
      return e ? e + 'M' : '无'
    }
  },
  {
    title: '模型来源',
    dataIndex: 'modelSourceName'
  },
  {
    title: '详细程度',
    dataIndex: 'detailDegreeName'
  },
  {
    title: '更新时间',
    dataIndex: 'modifiedTime',
    width: 180
  },
  {
    title: '修改人',
    dataIndex: 'modifiedUserName'
  },
  {
    title: '当前版本',
    dataIndex: 'modelVersion',
    fixed: 'right'
  }
]
export default {
  name: 'ComposeComponent',
  props: {
    // 项目信息
    projectInfo: Object
  },
  components: {
    DialogForm
  },
  watch: {
    // 监听项目id刷新列表
    'projectInfo.projectId'(e) {
      e && this.$refs.table?.getData(null, true)
    },
    visible(e) {
      e && this.$refs.tableHistory?.getData(null, true)
    }
  },
  mounted() {
    // 注册监听，用与组合模型时刷新此列表
    this.$bus.$on('refreshCompose', this.handleSearch)
  },
  destroyed() {
    // 销毁监听
    this.$bus.$off('refreshCompose')
  },
  data() {
    return {
      searchOptions,
      columns,
      columnsHistory,
      visible: false, // 弹窗控件
      form: {}, //选中项对象
      loadData: (params) => {
        if (!this.projectInfo.projectId) {
          return Promise.resolve({ code: 200, total: 0, data: [] })
        }
        let args = Object.assign(params, { param: { ...this.queryParams, projectId: this.projectInfo.projectId } })
        return getBimPortfolioModel(args).then((res) => {
          if (res.code === '0') {
            return { code: 200, data: res.data?.list, total: res.data?.total }
          }
        })
      }, // 组合模型列表请求
      loadDataHistory: (params) => {
        let args = Object.assign(params, { param: { portfolioModelId: this.form.id } })
        return getPageBimPortfolioModelMapper(args).then((res) => {
          if (res.code === '0') {
            return { code: 200, data: res.data?.list, total: res.data?.total }
          }
        })
      } // 组合模型明细列表请求
    }
  },
  methods: {
    /**
     * @description: 查看全部模型
     * @param {Array} e：模型选中项
     */
    handleView(e) {
      getPageBimPortfolioModelMapper({ needCount: false, param: { portfolioModelId: e.id } }).then((res) => {
        if (res.code === '0') {
          let list = res.data?.list.map((item) => ({
            modelId: item.modelFileId,
            version: item.modelFileVersion,
            modelTitle: item.modelName,
          }))
          this.handleOpen(list)
        }
      })
    },
    /**
     * @description: 打开模型
     * @param {Array} modelList：模型选中项
     */
    handleOpen(modelList) {
      this.$router.push({
        path: '/bimIntegrate/model/modelPreview',
        query: {
          modelList: JSON.stringify(modelList)
        }
      })
    },
    /**
     * @description: 取消组合
     * @param {Object} e：行对象
     */
    handleRemove(e) {
      this.$confirm({
        title: '提示',
        content: '取消组合模型不会删除对应的模型，请确认是否取消？',
        onOk: () => {
          return deleteBimPortfolioModel({
            id: e.id
          }).then((res) => {
            if (res.code === '0') {
              this.$message.success('取消成功')
              this.handleSearch() // 刷新列表
            }
          })
        }
      })
    },
    /**
     * @description: 查看组合模型明细列表
     * @param {Object} e：行对象
     */
    handleActions(e) {
      this.form = e
      this.visible = true
    },
    /**
     * @description: 搜索
     * @param {*} val：搜索参数
     */
    handleSearch(val) {
      val && (this.queryParams = val)
      this.$refs.table.getData(null, true)
    }
  }
}
</script>

<style>
</style>
